<template>
  <div style="width:100%">
    <div>
      <el-row :gutter="12">
        <el-col :span="24" v-for="item in gateList" :key="item.id" style="margin-bottom:10px">
          <el-card class="box-card" :body-style="{ padding: '0px' }">
            <el-form :inline="true" style="padding:10px">
              <el-form-item label="显示名称" style="margin-bottom:5px">
                <el-input placeholder="名称" v-model="item.showName"></el-input>
              </el-form-item>
              <el-form-item label="人员设置" style="margin-bottom:0">
                <el-input
                  :readonly="true"
                  placeholder="点击选择人员"
                  class="menu-list__input"
                  @focus="getAuthList(item.id)"
                ></el-input>
              </el-form-item>
              <el-form-item style="margin-bottom:0">
                <el-button type="primary" @click="dataFormSubmit(item.id,item.showName)">确定</el-button>
              </el-form-item>
            </el-form>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <el-dialog :visible.sync="dialogVisible">
      <el-tree
        :data="menuList"
        :props="menuListTreeProps"
        ref="menuListTree"
        show-checkbox
        node-key="value"
        :highlight-current="true"
        :expand-on-click-node="false"
      ></el-tree>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="sureAuthList()">确 定</el-button>
      </span>
    </el-dialog>
    <GateUpdate v-if="addOrUpdatePosiVisible" ref="addOrUpdatePosi" @refreshDataList="getPageData"></GateUpdate>
  </div>
</template>

<script>
import GateUpdate from "./faceUpdate";
import { getAllKey } from "@/utils";

export default {
  components: { GateUpdate },
  data() {
    return {
      addOrUpdatePosiVisible: false,
      gateList: [],
      dataForm: {
        name: "",
        type: "1",
        status: ""
      },
      menuListTreeProps: {
        children: "children",
        label: "lable"
      },
      radio1: "闸机",
      radio2: "已连接",
      dialogVisible: false,
      menuList: []
    };
  },
  created() {
    this.getPageData();
  },
  methods: {
    getPageData() {
      this.$http({
        url: this.$http.adornUrl("/employee/showPartName"),
        method: "POST"
      }).then(({ data }) => {
        this.gateList = data.list;
      });
    },
    dataFormSubmit(id, name) {
      this.$http({
        url: this.$http.adornUrl("/employee/updatePartName"),
        method: "POST",
        data: this.$http.adornData({ id: id, name: name })
      }).then(({ data }) => {
        if (data.code == 0) {
          this.$message({
            message: "操作成功",
            type: "success",
            duration: 800,
            onClose: () => {
              this.dialogVisible = false;
            }
          });
        } else {
          this.$message.error(data.msg);
        }
      });
    },
    getAuthList(id) {
      this.mid = id;
      this.$http({
        url: this.$http.adornUrl("/org/showTypeEmList"),
        method: "POST",
        data: this.$http.adornData({ id: id })
      }).then(({ data }) => {
        if (data.code == 0) {
          this.dialogVisible = true;
          this.menuList = data.list;
          setTimeout(() => {
            this.$refs.menuListTree.setCheckedKeys(
              getAllKey(data.list, "value", "children"),
              true
            );
          }, 500);
        } else {
          this.$message.error(data.msg);
        }
      });
    },
    sureAuthList() {
      let addNodes = this.$refs.menuListTree.getCheckedNodes();
      let checkUserNodes = addNodes.filter(item => item.type == "2");
      let nodesArry = checkUserNodes.map(item => item.value);
      this.$http({
        url: this.$http.adornUrl("/employee/updatePartName"),
        method: "POST",
        data: this.$http.adornData({ eids: nodesArry.join(","), id: this.mid })
      }).then(({ data }) => {
        if (data.code == 0) {
          this.$message({
            message: "操作成功",
            type: "success",
            duration: 800,
            onClose: () => {
              this.dialogVisible = false;
            }
          });
        } else {
          this.$message.error(data.msg);
        }
      });
    },
    addposi(item, type) {
      this.addOrUpdatePosiVisible = true;
      this.$nextTick(() => {
        this.$refs.addOrUpdatePosi.init(item, type);
      });
    },

    delPost(id) {
      this.$http({
        url: this.$http.adornUrl("/sys/gate/deleteGateStatus"),
        method: "POST",
        params: this.$http.adornParams({ id: id })
      }).then(({ data }) => {
        if (data.code == 0) {
          this.$message({
            message: "操作成功",
            type: "success",
            duration: 800,
            onClose: () => {
              this.getPageData();
            }
          });
        } else {
          this.$message.error(data.msg);
        }
      });
    }
  }
};
</script>

<style>
.bottom button.button {
  text-align: center;
  margin-left: 0;
}
.button {
  border-right: 1px solid #e6e6e6;
  color: #666666;
  font-size: 13px;
}
.bottom button.button:last-child {
  border-right: none;
}
</style>